<i18n>
{
  "en": {
    "page_title": "User Management"
  },
  "zh": {
    "page_title": "用户管理"
  }
}
</i18n>

<template>
<div>

    <section>
      <header class="section-header">
        <div>Datasheet</div>
      </header>

        <el-table
          :data="specificationData"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180"
            label-class-name="text-center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="文件名称"
            width="180"
            label-class-name="text-center">
          </el-table-column>
          <el-table-column
            prop="address"
            label="上传人"
            label-class-name="text-center">
          </el-table-column>
          <el-table-column label-class-name="text-center" class-name="text-center action" prop="operate" :label="$t('common.operation')"
            width="180">
            <template slot-scope="scope">

                <a href="/" class="text-info" @click.prevent="viewDetailHandle(scope.row)">{{$t('common.download')}}</a>

            </template>
          </el-table-column>
        </el-table>

    </section>

    <section>
      <header class="section-header">
        <div>User Manual</div>
      </header>

        <el-table
          :data="specificationData"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180"
            label-class-name="text-center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="文件名称"
            width="180"
            label-class-name="text-center">
          </el-table-column>
          <el-table-column
            prop="address"
            label="上传人"
            label-class-name="text-center">
          </el-table-column>
          <el-table-column label-class-name="text-center" class-name="text-center action" prop="operate" :label="$t('common.operation')"
            width="180">
            <template slot-scope="scope">

                <a href="/" class="text-info" @click.prevent="viewDetailHandle(scope.row)">{{$t('common.download')}}</a>

            </template>
          </el-table-column>
        </el-table>

    </section>


    <section>
      <header class="section-header">
        <div>A&E Document</div>
      </header>

        <el-table
          :data="specificationData"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180"
            label-class-name="text-center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="文件名称"
            width="180"
            label-class-name="text-center">
          </el-table-column>
          <el-table-column
            prop="address"
            label="上传人"
            label-class-name="text-center">
          </el-table-column>
          <el-table-column label-class-name="text-center" class-name="text-center action" prop="operate" :label="$t('common.operation')"
            width="180">
            <template slot-scope="scope">

                <a href="/" class="text-info" @click.prevent="viewDetailHandle(scope.row)">{{$t('common.download')}}</a>

            </template>
          </el-table-column>
        </el-table>

    </section>

    <section>
      <header class="section-header">
        <div>General Certification（从GDP获取）</div>
      </header>

        <el-table
          :data="specificationData"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180"
            label-class-name="text-center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="文件名称"
            width="180"
            label-class-name="text-center">
          </el-table-column>
          <el-table-column
            prop="address"
            label="上传人"
            label-class-name="text-center">
          </el-table-column>
          <el-table-column label-class-name="text-center" class-name="text-center action" prop="operate" :label="$t('common.operation')"
            width="180">
            <template slot-scope="scope">

                <a href="/" class="text-info" @click.prevent="viewDetailHandle(scope.row)">{{$t('common.download')}}</a>

            </template>
          </el-table-column>
        </el-table>

    </section>

    <section>
      <header class="section-header">
        <div>Region Certification-区域</div>
      </header>

        <el-table
          :data="specificationData"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180"
            label-class-name="text-center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="文件名称"
            width="180"
            label-class-name="text-center">
          </el-table-column>
          <el-table-column
            prop="address"
            label="上传人"
            label-class-name="text-center">
          </el-table-column>
          <el-table-column label-class-name="text-center" class-name="text-center action" prop="operate" :label="$t('common.operation')"
            width="180">
            <template slot-scope="scope">

                <a href="/" class="text-info" @click.prevent="viewDetailHandle(scope.row)">{{$t('common.download')}}</a>

            </template>
          </el-table-column>
        </el-table>

    </section>

    <section>
      <header class="section-header">
        <div>其他资料</div>
      </header>

        <el-table
          :data="specificationData"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180"
            label-class-name="text-center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="文件名称"
            width="180"
            label-class-name="text-center">
          </el-table-column>
          <el-table-column
            prop="address"
            label="上传人"
            label-class-name="text-center">
          </el-table-column>
          <el-table-column label-class-name="text-center" class-name="text-center action" prop="operate" :label="$t('common.operation')"
            width="180">
            <template slot-scope="scope">

                <a href="/" class="text-info" @click.prevent="viewDetailHandle(scope.row)">{{$t('common.download')}}</a>

            </template>
          </el-table-column>
        </el-table>

    </section>

  </div>
</template>

<script>
  export default {
    data () {
      return {

        specificationData: [{
          label: '2016-05-02',
          value: '王小虎'
        }, {
          label: '2016-05-04',
          value: '王小虎1'
        }]
      }
    },
    computed: {

    },
    watch: {

    },
    created () {

    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleDelete(index, row) {
        this.specificationData.splice(index, 1)
      },
      addSpecification() {
        this.specificationData.push({
          label: '',
          value: ''
        })
      },
      todo() {

      }
    }
  }
</script>

<style scoped>
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0 5px;
    color: #666;
    font-size: 16px;
  }

  /* .el-table >>> .el-table__row {
    background-color: transparent;
  } */



</style>
